<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*ul, ol {*/
        /*    !*list-style-type: circle;*!*/
        /*    !*去除列表的符合*!*/
        /*    list-style: none;*/
        /*}*/

        /*!*后代选择器*!*/
        /*.list > li {*/
        /*    !*背景颜色*!*/
        /*    !*background-color: #ca1b1b;*!*/
        /*    border: 1px solid #f00;*/
        /*}*/

        /*.list li span {*/
        /*    !*字体颜色*!*/
        /*    color: #ffffff;*/
        /*}*/
        .list > li {
            background-color: #0ea0fc;
        }

        /*.list > li:first-child {*/
        /*    background-color: #f00;*/
        /*}*/

        .list > li:last-child {
            background-color: #ca20f9;
        }

        .list > li:nth-child(1) {
            background-color: #68ffd3;
        }

        /*.list > li:hover {*/
        /*    background-color: #ca1b1b;*/
        /*}*/


    </style>
</head>
<body>
<!--ement语法: ul>li*5    -->
<ul class="list">
    <li>项目1<span>小标题1</span></li>
    <li>项目2
        <ul>
            <li>小项目1</li>
            <li>小项目2</li>
        </ul>

    </li>
    <li>项目3</li>
    <li>项目4</li>
    <li>项目5</li>
</ul>
<ul>
    <li>项目10</li>
    <li>项目20</li>
    <li>项目30</li>
    <li>项目40</li>
    <li>项目50</li>
</ul>


<ol type="I">
    <li>项目1<span>小标题1</span></li>
    <li>项目2</li>
    <li>项目3</li>
    <li>项目4</li>
</ol>
<dl>
    <dt>HTML系列</dt>
    <dd>HTML5</dd>
    <dd>CSS3</dd>
</dl>


</body>
</html>
